<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body>
	<div class="layui-fluid">
		<hr class="layui-bg-gray">
		<div class="layui-inline">
			<div class="layui-input-inline">
				<input class="layui-input" name="jobName" placeholder="请输入任务名称" autocomplete="off" />
			</div>
			<button class="layui-btn layui-btn-normal" id="search" data-type="reload">搜索</button>
		</div>
		<table id="task-table" lay-filter="task-table"></table>
	</div>
	<!-- 工具栏 -->
	<script type="text/html" id="toolbarUser">
        <div class="layui-btn-container">
            <button shiro:hasPermission="sys:task:add" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle" ></i>添加</button>
            <button shiro:hasPermission="sys:task:batchRemove" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchRemove"><i class="layui-icon layui-icon-delete"></i>删除</button>
        </div>
    </script>
	<!-- 操作列 -->
	<script type="text/html" id="task-state">
     <div class="layui-btn-group">
        <button shiro:hasPermission="sys:task:edit" class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
        <button shiro:hasPermission="sys:task:remove" class="layui-btn layui-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i></button>
    </div>
    </script>
	<div th:include="include::footer"></div>
	<script>
		changeJobStatus = false;
	</script>
	<script shiro:hasPermission="sys:task:changeJobStatus">
		changeJobStatus = true;
	</script>
	<script>
		layui.use([ 'table' ], function() {
			var $ = layui.jquery;
			var table = layui.table;
			// 渲染表格
			var renderTable = function() {
				layer.load(2);
				table.render({
					elem : '#task-table',
					url : '/sys/task/list',
					toolbar : '#toolbarUser',
					page : true,
					id : 'jobReload',
					parseData : chaoLayuiTable.parseData,
					request : chaoLayuiTable.request,
					response : chaoLayuiTable.response,
					//limit : 1,
					cols : [ [ {
						type : 'checkbox',
						fixed : 'left'
					}, {
						field : 'id',
						title : 'id',
						fixed : 'left',
						unresize : true,
						sort : true,
						width : 80
					}, {
						field : 'jobName',
						align : 'center',
						title : '任务名称'
					}, {
						align : 'center',
						field : 'jobGroup',
						title : '任务分组'
					}, {
						align : 'center',
						field : 'beanClass',
						title : '任务类'
					}, {
						align : 'center',
						field : 'cronExpression',
						title : 'cron表达式'
					}, {
						align : 'center',
						field : 'jobStatus',
						title : '停起操作',
						templet : function(d) {
							if(changeJobStatus){
								if (d.jobStatus == 0) {
									return '<button class="layui-btn layui-btn-sm" lay-event="changeStatus"><i class="layui-icon layui-icon-play"></i>开启</button>';
								} else {
									return '<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="changeStatus"><i class="layui-icon layui-icon-close"></i>关闭</button>';
								}
							}
							return "无";
						},
					}, {
						title : '操作',
						toolbar : '#task-state',
						align : 'center'
					} ] ],
					done : function() {
						layer.closeAll('loading');
					}
				});

			};
			renderTable();
			// 搜索 
			var active = {
				reload : function() {
					//执行重载
					table.reload('jobReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : {
							jobName : $('[name=jobName]').val()

						}
					});
				}
			};

			$('#search').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			//头工具栏事件
			table.on('toolbar(task-table)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'add'://增加
					openAdd();
					break;
				case 'batchRemove'://批量删除
					var data = checkStatus.data;
					if (data.length < 1) {
						layer.msg('请至少选择一个');
						break;
					}
					//批量删除
					batchRemove(data);
				}
			});

			//监听工具条
			table.on('tool(task-table)', function(obj) {
				var data = obj.data;
				console.log(data)
				var layEvent = obj.event;
				if (layEvent === 'del') {//删除
					remove(data.id);
				} else if (layEvent === 'edit') {//修改
					if (data.jobStatus == 1) {
						layer.alert('修改之前请先停止任务');
						return;
					}
					edit(data.id);
				} else if (layEvent === 'changeStatus') {//修改-任务状态
					changeStatus(data.id, data.jobStatus);
				}
			});

			function remove(id) {
				layer.confirm('确定要删除选中的记录？', {
					btn : [ '确定', '取消' ]
				}, function() {
					$.ajax({
						url : "/sys/task/remove",
						type : "post",
						data : {
							id : id
						},
						success : function(r) {
							if (r.retCode == '0000') {
								layer.msg("删除成功");
								renderTable();
							} else {
								layer.msg(r.retMsg);
							}
						}
					});
				})
			}

			function batchRemove(data) {
				layer.confirm("确认要删除选中的'" + data.length + "'条数据吗?", {
					btn : [ '确定', '取消' ]
				}, function() {
					var ids = new Array();
					$.each(data, function(i, row) {
						ids[i] = row['id'];
					});
					console.log(ids);
					$.ajax({
						type : 'POST',
						data : {
							"ids" : ids
						},
						url : '/sys/task/batchRemove',
						success : function(r) {
							if (r.retCode == '0000') {
								layer.msg(r.retMsg);
								renderTable();
							} else {
								layer.msg(r.retMsg);
							}
						}
					});
				});
			}

			function edit(id) {
				layer.open({
					type : 2,
					title : '修改',
					maxmin : false,
					shadeClose : false, // 点击遮罩关闭层
					area : [ '50%', '80%' ],
					content : '/sys/task/edit/' + id // iframe的url
				});
			}

			function openAdd() {
				layer.open({
					type : 2,
					title : '增加',
					maxmin : false,
					shadeClose : false, // 点击遮罩关闭层
					area : [ '50%', '80%' ],
					content : '/sys/task/add' // iframe的url
				});
			}

			function changeStatus(id, status) {
				var actCh;
				var cmd;
				if (status == 0) {
					cmd = 'start';
					actCh = "确认要开启任务吗？";
				} else {
					cmd = 'stop';
					actCh = "确认要停止任务吗？";
				}
				layer.confirm(actCh, {
					btn : [ '确定', '取消' ]
				}, function() {
					$.ajax({
						url : "/sys/task/changeJobStatus",
						type : "post",
						data : {
							'id' : id,
							'cmd' : cmd
						},
						success : function(r) {
							if (r.retCode == '0000') {
								layer.msg(r.retMsg);
								renderTable();
							} else {
								layer.msg(r.retMsg);
							}
						}
					});
				})
			}

		});
	</script>
</body>
</html>